import React, {Component} from 'react';
import {func, object} from 'prop-types';
import "./DeviceCard.less";
import {SettingOutlined} from '@ant-design/icons';
import MotorSwitch from "./MotorSwitch";
import IconStop from '../../img/icon-stop.png';

class DeviceCard extends Component {
    static propTypes = {
        device: object.isRequired,
        onMotorSwitchChange: func.isRequired,
        onStop: func.isRequired,
        onWeatherClick: func.isRequired,
        onSettingClick: func.isRequired,
    };
    onMotorStateChange = (no, state) => {
        const {onMotorSwitchChange, device} = this.props;
        onMotorSwitchChange(device, no, state);
    };

    render() {
        const device = this.props.device;
        const status = device.status || {motor1: 'off', motor2: 'off'};
        const weather = device.weather || {};
        return (
            <div className="device-card">
                <div className="card-header">
                    <div className="name" onClick={() => this.props.onSettingClick(device)}>
                        <SettingOutlined/>
                        {device.deviceName}
                    </div>
                    <div className="address">{device.address}</div>
                    <div className="weather"
                         onClick={() => this.props.onWeatherClick(device)}> > {weather.title || '未知'}/{weather.temperature || '-'}°C
                    </div>
                </div>
                <div className="card-body">
                    <div className="left">
                        <MotorSwitch state={status.motor1} onChange={state => this.onMotorStateChange(0, state)}/>
                        <MotorSwitch state={status.motor2} onChange={state => this.onMotorStateChange(1, state)}/>
                    </div>
                    <div className="right">
                        <div className="stop">
                            <img src={IconStop} alt="stop" onClick={() => this.props.onStop(device)}/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default DeviceCard;
